﻿//========================================================================//
//      Copyright 2012, Smilodon Studio Inc.
//      All rights reserved.
//========================================================================//

/**
 *	base 
 *      @author: CYS
 */


var canvas;
var g2D;

var height;
var width;
var fullWindow = true;
var ratio = 1;

var time = 0;
var dtime = 0;
var startime;
var lasttime;
var g_infoShow = new infoShow();
var bClear = false;
var clearTime = 0;

var backgroundPage;
var showPages = [];

var mouse = {x: 0, y: 0, x0: 0, y0: 0, dx: 0, dy: 0, left: false, right: false};
var pageid = 0;
var maxPages = 14;
var imgString5;
var imgBlue;
var imgSpeed;
var imgPinhole;
var imgPinhole0;
var imgPersp;
var imgEye;
var imgProve;

var lineColor = 'rgba(255, 255, 225, 1)';

function canvasResize()
{
	ratio = window.innerWidth/canvas.width;
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	width = canvas.width;
	height = canvas.height;
	if(!g2D)g2D = canvas.getContext("2d");

	backgroundPage.resize(canvas.width, canvas.height);
	backgroundPage.p2D.fillStyle = "#11529a";
	backgroundPage.p2D.fillRect(0, 0, width, height);
	
	backgroundPage.setDraw(function()
	{
		backgroundPage.p2D.shadowOffsetX = 8;
		backgroundPage.p2D.shadowOffsetY = 8;
		backgroundPage.p2D.shadowBlur    = 5;
		backgroundPage.p2D.shadowColor   = 'rgba(20, 20, 0, 0.3)';
		backgroundPage.p2D.font         = 'normal 60px sans-serif';
		backgroundPage.p2D.textBaseline = 'top';
		backgroundPage.p2D.fillStyle = "rgba(255, 255, 255, 1)";
	});
	backgroundPage.draw();
	

	for(var i = 0; i < maxPages; i++)
	{
		showPages[i].resize(canvas.width, canvas.height);
	}

	g2D.shadowOffsetX = 8;
	g2D.shadowOffsetY = 8;
	g2D.shadowBlur    = 5;
	g2D.shadowColor   = 'rgba(20, 20, 0, 0.3)';
	g2D.textBaseline = 'top';
	g2D.textAlign = "center";
	g2D.fillStyle = "rgba(255, 255, 255, 1)";

	var k = 0;
	showPages[k++].setDraw( function()
	{
		g2D.font = "normal "+160*height/1000+"px sans-serif";
		var t = 'WebGL 入门';
		g2D.fillText(t, width/2, height*0.1);		
		

		g2D.font = "normal "+70*height/1000+"px sans-serif";
		var myname = "@陈弦五"
		g2D.fillText(myname, width/2, 330*height/1000);
		if(imgString5.isDrawable) g2D.drawImage(imgString5, width*0.5 - height*0.25, 450*height/1000,height*0.5,height*0.5);

	});

	showPages[k++].setDraw( function()
	{
		var t = "什么是webGL？"
		g2D.font = "normal "+120*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 330*height/1000);	
	});

	showPages[k++].setDraw( function()
	{
		var t = "demo: 碧水人家 "
		g2D.font = "normal "+120*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 110*height/1000);	
		t = "7年前，传统 3D API 能做什么"
		g2D.font = "normal "+60*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 330*height/1000);	
		if(imgBlue.isDrawable) g2D.drawImage(imgBlue, width*0.5 - height*0.5, 450*height/1000,height,height*0.5);

	});

	showPages[k++].setDraw( function()
	{
		var t = "demo: SPEED "
		g2D.font = "normal "+120*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 110*height/1000);	
		t = "html5 gameJam (ShangHai 2012-2)"
		g2D.font = "normal "+70*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 320*height/1000);	
		if(imgSpeed.isDrawable) g2D.drawImage(imgSpeed, width*0.5 - height*0.4, 450*height/1000,height*0.8,height*0.5);

	});

	showPages[k++].setDraw( function()
	{
		var t = "字符的舞蹈";
		g2D.font = "normal "+120*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 330*height/1000);		
	});

	showPages[k++].setDraw( function()
	{
		g2D.font = "normal "+100*height/1000+"px sans-serif";
		var t = "使用 canvas 2D";
		g2D.fillText(t, width/2, 330*height/1000);	
		t = "模拟最基本的webGL";
		g2D.fillText(t, width/2, 450*height/1000);	

	});

	showPages[k++].setDraw( function()
	{
		var t = "墨子 小孔成像";
		g2D.font = "normal "+100*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 110*height/1000);	
		t = "“景到，在午有端，与景长，说在端。” -- 《墨经》";
		g2D.font = "normal "+50*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 300*height/1000);	
		
		if(imgPinhole0.isDrawable) g2D.drawImage(imgPinhole0, width*0.5 - height*0.4, 440*height/1000,height*0.8,height*0.4);
	
		
	});

	showPages[k++].setDraw( function()
	{
		var t = "墨子 小孔成像";
		g2D.font = "normal "+100*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 110*height/1000);
		
		g2D.font = "normal "+50*height/1000+"px sans-serif";
		t = " D1 / L1 = D2 / L2";
		g2D.fillText(t, width*0.5, 320*height/1000);	
		t = " ==>  D2 = (D1*L2) / L1 ";
		g2D.fillText(t, width*0.5, 400*height/1000);		
		
		if(imgPinhole.isDrawable) g2D.drawImage(imgPinhole, width*0.5 - height*0.4, 500*height/1000,height*0.8,height*0.8);

	
		
	});


	showPages[k++].setDraw( function()
	{
		var t = "视锥体";
		g2D.font = "normal "+100*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 110*height/1000);
		
		if(imgPersp.isDrawable) g2D.drawImage(imgPersp, width*0.5 - height*0.35, 300*height/1000,height*0.7,height*0.55);

	});


	showPages[k++].setDraw( function()
	{
		var t = "透视矫正";
		g2D.font = "normal "+80*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 80*height/1000);
		
		if(imgEye.isDrawable) g2D.drawImage(imgEye, width*0.5 - height*0.5, height*0.2,height*1.0,height*0.7);

	});

	showPages[k++].setDraw( function()
	{
		var t = "叶中豪的证明";
		g2D.font = "normal "+80*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 80*height/1000);
		
		if(imgProve.isDrawable) g2D.drawImage(imgProve, width*0.5 - height*0.65, height*0.2,height*1.3,height*0.76);

	});

	showPages[k++].setDraw( function()
	{
		g2D.font = "normal "+140*height/1000+"px sans-serif";
		var t = "问 题 ？";
		g2D.fillText(t, width/2, 330*height/1000);	


	});

	showPages[k++].setDraw( function()
	{
		g2D.textAlign = "center";
		var t = "参考文献 & 图片来源";
		g2D.font = "normal "+100*height/1000+"px sans-serif";
		g2D.fillText(t, width/2, 110*height/1000);
		
		g2D.textAlign = "left";
		g2D.fillStyle = "rgba(255, 255, 255, 1)";

		g2D.font = "normal "+35*height/1000+"px sans-serif";

		t = "http://xzh.2000y.net/userdir/96860656/news.php?id=1813";
		g2D.lineWidth = 1;
		g2D.fillText(t, height*0.24, 300*height/1000);	
		g2D.beginPath();
		g2D.moveTo(height*0.24, 0.5 + ~~(340*height/1000));
		g2D.lineTo(height*1.24, 0.5 + ~~(340*height/1000));
		g2D.strokeStyle = '#aaf';
		g2D.stroke();

		t = "http://140.111.34.194/teach/query.php?action=read_content&p=823&d=1296806261";
		g2D.fillText(t, height*0.24, 380*height/1000);	
	
		g2D.beginPath();
		g2D.moveTo(height*0.24, 0.5 + Math.ceil(height*0.42));
		g2D.lineTo(height*1.63, 0.5 + Math.ceil(height*0.42));
		g2D.stroke();
		g2D.closePath();	

		
		t = "透视矫正插值公式的几何证明:";
		g2D.fillText(t, height*0.24, 460*height/1000);	
		t = "http://www.cnblogs.com/cys12345/archive/2009/03/16/1413821.html";
		g2D.fillText(t, height*0.24, 500*height/1000);	
	
		g2D.beginPath();
		g2D.moveTo(height*0.24, 0.5 + Math.ceil(height*0.54));
		g2D.lineTo(height*1.4, 0.5 + Math.ceil(height*0.54));
		g2D.stroke();
		g2D.closePath();

		t = "http://deanm.github.com/pre3d/";
		g2D.fillText(t, height*0.24, 560*height/1000);	
	
		g2D.beginPath();
		g2D.moveTo(height*0.24, 0.5 + Math.ceil(height*0.6));
		g2D.lineTo(height*0.8, 0.5 + Math.ceil(height*0.6));
		g2D.stroke();
		g2D.closePath();
	});
}




function init() 
{
	canvas = document.getElementById('canvas3D');
	backgroundPage = new pages(canvas.width, canvas.height);

	for(var i = 0; i < maxPages; i++)
	{
		var p = new pages(canvas.width, canvas.height, canvas);
		p.id = i;
		showPages[i] = p;
	}

	canvasResize();
	
	var touchable = 'createTouch' in document;
	if (touchable)
	{
		canvas.addEventListener('touchstart', onTouchStart, false);
		canvas.addEventListener('touchmove', onTouchMove, false);
		canvas.addEventListener('touchend', onTouchEnd, false);
	}
	else
	{
		canvas.addEventListener('mousedown', onTouchStart, false);
		canvas.addEventListener('mousemove', onTouchMove, false);
		canvas.addEventListener('mouseup', onTouchEnd, false);
	}

	canvas.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );

	imgString5 = loadImg("string5.png");
	imgSpeed = loadImg("speed.jpg");
	imgBlue = loadImg("blue.png");
	imgPinhole = loadImg("pinhole.gif");
	imgPinhole0 = loadImg("pinhole0.jpg");
	imgPersp = loadImg("persp.jpg");
	imgEye = loadImg("eye.jpg");
	imgProve = loadImg("prove.jpg");

}

var bTimeout = false;
window.onresize = function()
{
	if (fullWindow) canvasResize();
	bTimeout = true;
}

var first = true;
var lastOrien;

window.ondeviceorientation =  function(e) 
{	
	if(first)
	{
		lastOrien = window.orientation;
		first = false;
	}
	if(window.orientation !== lastOrien)
	{
		window.onresize();
		lastOrien = window.orientation;
	}
	
	g_infoShow.add("alpa: ", e.alpha);
	g_infoShow.add("beta: ",e.beta);
	g_infoShow.add("gamma: ",e.gamma);
	g_infoShow.add("orientation: ",window.orientation);
}

window.onblur = function()
{
	bTimeout = true;
}

function drawScene()
{

	//g2D.fillStyle = "rgba(100,100,0,1)"; // clear screen
	//g2D.fillRect(0,0,width,height);

	g2D.drawImage(backgroundPage.canvas, 0, 0);
		
	
		
	if(mouse.left)
	{
		pageid++; 
		if(pageid === maxPages) pageid = maxPages - 1;
		mouse.left = false;
	} 

	if(mouse.right)
	{
		pageid--;
		if(pageid < 0) pageid = 0;
		mouse.right = false;
	} 

	g2D.save();
	showPages[pageid].draw();
	g2D.restore();
	
	// g_infoShow.show();

}



function onTouchStart(event)
{
	// Prevent the browser from doing its default thing (scroll, zoom)
	event.preventDefault();


	if(event.clientX) // on mouse down
	{
		mouse.x = mouse.x0 = event.clientX;
		mouse.y = mouse.y0 = event.clientY;
		
		//mouse.left = true;
	}
	
	if(!event.touches) return;
	// on touch star

	for(var i = 0; i < event.touches.length; i++)
	{
	}

}

function onTouchMove(event)
{
	event.preventDefault();

	if(event.clientX && mouse.down) // on mouse move
	{
		mouse.dx = event.clientX - mouse.x0;
		mouse.dy = event.clientY - mouse.y0;
		mouse.x = event.clientX;
		mouse.y = event.clientY;
		
	}
	
	if(!event.touches) return;
	
	for(var i = 0; i < event.touches.length; i++)
	{

	}


}

function onTouchEnd(event)
{
	event.preventDefault();

	if(event.clientX) // on mouse up
	{
		mouse.dx = 0;
		mouse.dy = 0;
		if(event.button === 2 || event.button === 3)mouse.right = true;
		else mouse.left = true;
	}
	if(!event.touches) return;
	
	for(var i = 0; i < event.touches.length; i++)
	{


	}
	
}

//setInterval(function()
//{
//	drawScene();
//}, 25);

function gameloop() 
{
	window.requestAnimFrame( gameloop );
	if(bTimeout)
	{
		lasttime = Date.now();
		bTimeout = false;
	}
	dtime = Date.now() - lasttime;
	time = Date.now() - startime;
	drawScene();
	lasttime = Date.now();

}


function game()
{
	init();
	gameloop();
}




